<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <!--1.引包-->
    <script src="js/vue.js"></script>
    <style>
        /*默认是红色的*/
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
       .active {
            background: green;
        }

    </style>
</head>
<body>
<div id="app">
    <h2>{{msg}}</h2>
    <h1>{{1+1}}</h1>
    <h2>{{isTrue}}</h2>
    <h2>{{str.split('').reverse().join('')}}</h2>
</div>
<hr>
<div id="app1">
    <h2>{{msg}}</h2>
    <h2 v-text="msg"></h2>
    <h2 v-text="msg2"></h2>
    <h2 v-html="msg2"></h2>

    <h2 v-if="isShow">if你真好看</h2>
    <h2 v-else>else你在说谎</h2>

    <!--相当于display:none/block-->
    <h2 v-show="isShow">show显示</h2>
    <h2 v-show="!isShow">!show隐藏</h2>

    <!--样式绑定,v-bind:class  可简写，不加v-bind -->
    <!--事件绑定v-on:click 或者@click-->
    <div class="box" :class="{'active':isGreen}"  @click="clickHandler"></div>

    <!--for in 循环-->
    <!--集合-->
    <ul>
        <li v-for="(item,index) in menuLists">
            <span v-text="item.id"></span>
            <span>{{item.name}}</span>
            <span>{{item.price}}</span>
        </li>
    </ul>
    <!--对象-->
    <ul>
        <li v-for="(value,key) in person">
            {{key}}==={{value}}
        </li>
    </ul>



</div>

<script>
    //2.创建实例化对象
    var vm = new Vue({
       el:'#app',//目的地
       data:{
           //数据属性
           //既可以是一个对象 也可以是一个函数
           msg:'黄瓜',
           isTrue:1==1,
           str:'helloVue'
       },
        //如果template中定义了内容，那么优先加载template，如果没有定义内容那么加载的是#app的模板
        template:''
    });
    console.log(vm);

    //创建实例化对象
    new Vue({
        el: '#app1',
        data: function (){
            return{
                msg:'指令系统',
                msg2:'<h1>朱玲</h1>',
                isShow:false,
                isActive:true,
                isGreen:true,
                menuLists:[ //集合
                    {id:1,name:'画师',price:70},
                    {id:2,name:'肉',price:30},
                    {id:3,name:'菜',price:90},
                ],
                person:{//对象
                    name:'张三',
                    age:'40',
                    eat:'大盘鸡',
                }
            }
        },
        template:'',
        methods:{
            clickHandler(e){
                this.isGreen=!this.isGreen;
            }
        },


    });

</script>
</body>
</html>